<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业示范</title>
</head>
<body>
<table id="tbl">
    <tr>
        <td>年龄</td>
        <td>姓名</td>
        <td>性别</td>
        <td>段位</td>
        <td>编辑</td>
    </tr>
    <style>
        #ff{
            display:none;<!--隐藏表单-->
        }
    </style>
</table>
<button onclick="add()">添加</button>
<form id="ff">
    <input type="text" name="uname">
    <input type="button" value="确定" onclick="addtr()">
</form>
<script>
    var tbl=document.getElementById('tbl');


    function add(){
        /*tbl.innerHTML+=str;*/
        var ff=document.getElementById('ff');
        ff.style.display='block';//点击添加那个按钮，就会显示表单
    }
    var num=0;
    function addtr(){
        var ff=document.getElementById('ff');/*拿到表单*/
        var str=`<tr id="haha${++num}"><!--haha代表表格的每一行-->
        <td>18</td>
        <td>${ff.uname.value}</td> <!--代表输入文本框中的内容，在这里就是代表输入的姓名-->
        <td>男</td>
        <td>黄金</td>
        <td>
        <a href="javascript:del(${num})">删除</a> <!--点击这个链接就会调用del()函数-->
        |<a href="javascript:del(this)">更新</a>
        </td>
    </tr>`;/*模板字符串*/
        tbl.innerHTML+=str;
        ff.style.display='none';
    }
    function del(e){
        var id="haha"+e;
        document.getElementById('id').remove;
    }
</script>
</body>
</html>